import React, { useEffect, useState } from 'react'
import { Descriptions, PageHeader } from "antd"
import http from "../../../util/http"
import style from "./newsPreview.module.scss"
import moment from "moment"
export default function Preview(props) {
  const user = JSON.parse(localStorage.getItem("token"))
  // console.log(user);
  const [saveList, setSaveList] = useState(null);
  useEffect(() => {
    const id = props.match.params.id;
    http.get(`/news/${id}?_expand=category&_expand=role`).then(res => {
      setSaveList(res.data)
    })
  }, [props.match.params.id])
  const auditList = ["未审核", "审核中", "已通过", "未通过"]
  const publishList = ["未发布", "待发布", "已上线", "未上线"]
  const colorList = ["black", "orange", "green", "red"]
  return (
    < div >
      {saveList && console.log(saveList.auditState)}
      {saveList && <PageHeader
        onBack={() => window.history.back()}
        title={saveList.title}
        subTitle={saveList.category.value}
      >
        <Descriptions size="small" column={3}>
          <Descriptions.Item label="创建者:">{saveList.author}</Descriptions.Item>
          <Descriptions.Item label="创建时间:">
            {moment(saveList.createTime).format("YYYY/MM/DD HH:mm:ss")}
          </Descriptions.Item>
          <Descriptions.Item label="发布时间:">{saveList.publishTime ? moment(saveList.createTime).format("YYYY/MM/DD HH:mm:ss") : "-"}</Descriptions.Item>
          <Descriptions.Item label="区域:">{saveList.region}</Descriptions.Item>
          <Descriptions.Item label="审核状态:" >
            {<span style={{ color: colorList[saveList.auditState] }}>{auditList[saveList.auditState]}</span>}
          </Descriptions.Item>
          <Descriptions.Item label="发布状态:">
            {<span style={{ color: colorList[saveList.publishState] }}>{publishList[saveList.publishState]}</span>}
          </Descriptions.Item>
          <Descriptions.Item label="访问数量:">
            {<span style={{ color: "green" }}>{saveList.view}</span>}
          </Descriptions.Item>
          <Descriptions.Item label="点赞数量:">
            {<span style={{ color: "green" }}>{saveList.star}</span>}
          </Descriptions.Item>
          <Descriptions.Item label="评论数量:">
            {<span style={{ color: "green" }}>{0}</span>}
          </Descriptions.Item>
        </Descriptions>
      </PageHeader>
      }
      {
        saveList && <div dangerouslySetInnerHTML={{
          __html: saveList.content
        }} className={style.content}>
        </div>
      }
    </ div>
  )
}
